// 页数改变
$(function () {
  let url = "http://chst.vip:1234/api/getmoneyctrl";
  let totalPage = null;
  //渲染参数--moneyctrl ==> pageid
  let query = locationParam();

  let pageNum = $("select").val();
  pageNum = 1;
  $("#changePage .add").click(function () {
    $("select").val(--pageNum);
    if (pageNum < totalPage)
      $("#changePage .red").prop("disabled", false).css("color", "black");
    if (pageNum <= 1) $(this).prop("disabled", true).css("color", "#ccc");
    onceAjax(url, { pageid: pageNum - 1 });
  });
  $("#changePage .red").click(function () {
    $("select").val(++pageNum);
    if (pageNum > 1)
      $("#changePage .add").prop("disabled", false).css("color", "black");
    if (pageNum >= totalPage)
      $(this).prop("disabled", true).css("color", "#ccc");
    onceAjax(url, { pageid: pageNum - 1 });
  });
  $("#changePage select").change(function () {
    pageNum = $(this).val();
    if (pageid == totalPage) {
      $("#changePage .red").prop("disabled", false).css("color", "#ccc");
    } else {
      $("#changePage .red").prop("disabled", false).css("color", "black");
    }
    if (pageid === "1") {
      $("#changePage .add").prop("disabled", false).css("color", "#ccc");
    } else {
      $("#changePage .add").prop("disabled", false).css("color", "black");
    }
    onceAjax(url, { pageid: pageNum - 1 });
  });

  //....................................................................

  //封装请求 render({ pageid ：num })
  function onceAjax(url, { pageid }) {
    let res1 = sessionStorage.getItem(`pageid${pageid}`);
    res1 = JSON.parse(res1);
    if (res1) {
      render(res1, { pageid });
    } else {
      $.ajax({
        url,
        async: false,
        data: { pageid },
        success: (res) => {
          sessionStorage.setItem(`pageid${pageid}`, JSON.stringify(res));
          render(res, { pageid });
        },
      });
    }
  }

  //...........................................................................

  //打开页面
  onceAjax(url, { pageid: pageNum - 1 });

  //追加页面
  function render(res) {
    let htm = "";
    let regExp = /(?<=imgurl=)[^'"]*/;
    $.each(res.result, (i, item) => {
      let productImg2 = regExp.exec(item.productImg2);
      htm += `
          <li>
              <a productId='${item.productId}' href="indexXiang.html?productid=${item.productId}">
              <img src=${productImg2[0]} height='100' width='100' alt=''>
                  <div class="proinfo">
                      <b>${item.productName}</b>
                      <br>
                      <em>${item.productFrom} &nbsp| </em>
                      <span>${item.productTime}</span>
                      <i>${item.productComCount}</i>
                  </div>
              </a>
          </li>
      `;
    });
    totalPage = Math.ceil(res.totalCount / res.pagesize);
    $("ul").html(htm);
    $("nav a:nth-child(3)").html(query.title);
  }
  //追加页数  totalPage
  let pageChangerHtml = "";
  let i = 0;
  while (i < totalPage) {
    pageChangerHtml += `<option value="${++i}">${i}/${totalPage} </option>`;
  }
  $("#pageSelect").html(pageChangerHtml);
  if (totalPage === 1) {
    $("#changePage button").prop("disabled", true).css("color", "#ccc");
  } else {
    $(".add").prop("disabled", true).css("color", "#ccc");
  }
});
